<template>
	<div class="article-container">
		<!-- 导航栏 -->
		<van-sticky>
			<van-nav-bar :title='title' :border='false' left-arrow @click-left="onClickLeft" />
		</van-sticky>

		<div class="main-wrap">
			<!-- 加载中 -->
			<div class="loading-wrap" v-if="loading">
				<van-loading color="#ffb5c5" vertical>加载中</van-loading>
			</div>

			<!-- 加载完成-文章详情 -->
			<div class="article-detail" v-else-if="this.article.title">
				<!-- 图片展示 -->
				<div class="article-img">
					<img :src='article.cover' />
				</div>

				<!-- 文章标题 -->
				<p class="article-title">{{article.title}}</p>

				<!-- 用户信息 -->
				<van-row class="article-userinfo">
					<van-col span="1"></van-col>
					<van-col span="2" style="display:flex; align-items:center;">
						<van-image round class="img" src="../static/img/myimg.png" />
					</van-col>
					<van-col span="1"></van-col>
					<van-col span="15" class="username">
						{{username}}<br />
						<time>{{adddate}}</time>
					</van-col>
					<van-col span="5" style="display:flex; align-items:center;">
						<van-button class="follow-btn" color="#ffb5c5" size="small" icon="plus">关注
						</van-button>
					</van-col>
				</van-row>

				<!-- 文章内容 -->
				<div class="article-content">{{article.content}}</div>
				<van-divider>正文结束</van-divider>
			</div>

			<!-- 加载失败：404 -->
			<div class="error-wrap" v-else-if="errStatus = 404">
				<van-icon name="failure" />
				<p class="text">该资源不存在或已删除！</p>
			</div>

			<!-- 加载失败：其它未知错误（例如网络原因或服务端异常） -->
			<div class="error-wrap" v-else>
				<van-icon name="failure" />
				<p class="text">内容加载失败！</p>
				<van-button class="retry-btn">点击重试</van-button>
			</div>

		</div>

		<!-- /底部区域 -->
		<van-action-bar :placeholder='true'>
			<van-action-bar-button class="comment" text="评论" />
			<van-action-bar-icon icon="good-job" />
			<van-action-bar-icon icon="star" />
		</van-action-bar>
	</div>
</template>

<script setup>
	import {
		getTopicByTitle
	} from '@/api/common'
	import {
		getUserInfo
	} from '@/api/user'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		Toast
	} from 'vant';
	import 'vant/es/toast/style';

	const props = defineProps({
		title: {}
	})

	const article = ref({}) //文章数据
	const loading = ref(true) // 判断loading的出现
	const errStatus = ref(0) // 判断是出现错误 404 还是别的
	const username = ref('')
	const adddate = ref()

	onMounted(() => {
		loadArticle()
	})

	function loadArticle() {
		setTimeout(function() {
			getTopicByTitle(props.title)
				.then(res => {
					if (res.code != 0) {
						console.log(`获取数据失败，` + res.message);
					} else {
						article.value = res.data
						adddate.value = res.data.addtime
						loadUser(article.value.user_id)
					}
				}).catch(err => {
					if (err.response && err.response.status === 404) {
						errStatus.value = 404
					}
					Toast.fail('获取文章数据失败')
				})
			loading.value = false
		}, 500)

	}

	function loadUser() {
		getUserInfo(article.value.user_id)
			.then(res => {
				if (res.code != 0) {
					console.log(`获取数据失败，` + res.message);
				} else {
					username.value = res.data.username
				}
			}).catch(err => {
				console.log(err)
			})
	}

	const onClickLeft = () => history.back();
</script>

<style>
	:root {
		--van-nav-bar-background-color: #FFB5C5;
		--van-nav-bar-height: 72px;
		--van-nav-bar-title-text-color: white;
		--van-nav-bar-title-font-size: 20px;
		--van-nav-bar-arrow-size: 20px;
		--van-field-label-width: 32px;
		--van-field-word-limit-color: gray;
		--van-field-word-limit-font-size: 16px;

		/* actionbar */
		--van-action-bar-background-color: #FFB5C5;
		--van-action-bar-icon-background-color: #FFB5C5;

		--van-action-bar-icon-size: 24px;
		--van-action-bar-icon-color: #FFF;
		--van-action-bar-icon-active-color: #FFF;
		--van-action-bar-height: 64px;
	}

	.comment .van-button__text {
		color: lightgray;
	}

	.van-button--default {
		border-radius: 0;
		margin-left: 12px;
	}

	.van-icon-arrow-left {
		color: var(--nav-bar-icon-color, #FFF) !important;
	}
</style>

<style scoped>
	@import url("@/assets/style/details");
</style>
